﻿#exportModal {
    .export-messages-container {
        position: relative;

        &:before {
            content: 'All dates are in UTC';
            top: 0;
            left: 0;
            position: absolute;
            background-color: @panel-info-bg;
            font-size: 12px;
            color: @panel-info-text;
            padding: 2px 5px;
            transform: translateY(-100%);
        }
    }

    .export-messages {
        height: 250px;
        overflow: auto;
    }

    .export-list {
        .export-legend {
            text-transform: uppercase;
            font-size: 10px;

            @media (max-width: @screen-xs-max) {
                .status, .name {
                    display: none;
                }
            }
        }

        .export-item, .export-legend {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 0 @grid-gutter-width/2;

            + .export-item:not(.nested-item) {
                margin-top: @grid-gutter-width/4;
            }


            .name {
                width: 60%;
                flex-grow: 1;
                overflow: hidden;

                h3 {
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .status {
                width: 30%;
                flex-shrink: 0;
            }

            .read, .skipped, .errors {
                width: 33%;
                text-align: center;
                flex-shrink: 0;
            }

            @media (min-width: @screen-sm) {
                flex-wrap: nowrap;

                .name {
                    width: auto;
                }

                .status {
                    width: 180px;
                }

                .read, .skipped, .errors {
                    width: 90px;
                    flex-grow: 0;
                }
            }

            .read:not(.text-muted) {
                color: @brand-success;
            }

            .skipped:not(.text-muted) {
                color: @brand-warning;
            }

            .errors:not(.text-muted) {
                color: @brand-danger;
            }
        }

        .export-item {
            padding: @grid-gutter-width/4 @grid-gutter-width/2;
            background-color: @panel-bg-2;
            padding-left: @grid-gutter-width/4*3;


            &.nested-item {
                padding: @grid-gutter-width/8 @grid-gutter-width/2;
                background-color: fadeout(@panel-bg-2, 50%);
                box-shadow: inset 0 1px 0 0px darken(@panel-bg-2, 10%);
                margin-left: @grid-gutter-width/2;
                padding-left: @grid-gutter-width/4;
                color: darken(@gray, 3%);

                h4 {
                    margin: 0;
                }
            }

            .name {
                h3 {
                    margin: 0;
                }
            }

            .global-spinner {
                &:before {
                    position: relative;
                    top: 4px;
                }

                & + span {
                    margin-left: 5px;
                }
            }

            .status {
                font-size: 12px;

                &.status-processed {
                    color: @brand-success;
                }

                &.status-errored {
                    color: @brand-danger;
                }

                &.status-skipped {
                    color: @brand-warning;
                }

                &.status-processing {
                    color: @brand-primary;
                }

                &.status-processed-with-errors {
                    color: @brand-warning;
                }

                &.status-waiting {
                }
            }
        }

        .progress-overall {
            width: 600px;
            font-size: 12px;
            word-break: break-all;
            line-height: 1.4em;
        }
        .progress-count {
            text-align: center;
            width: 90px;
        }
    }
}
